@fluentui/utilities

Event Handling

The EventGroup class helps manage event listeners, making it easier to add and remove them in a consistent manner.

const { EventGroup } = require('@fluentui/utilities');

const eventGroup = new EventGroup(this);
eventGroup.on(window, 'resize', () => {
  console.log('Window resized');
});

CSS Class Management

The css function helps concatenate CSS class names conditionally, making it easier to manage dynamic class names in your components.

const { css } = require('@fluentui/utilities');

const className = css('class1', 'class2', { 'class3': true, 'class4': false });
console.log(className); // Outputs: 'class1 class2 class3'

Object Merging

The assign function is used to merge multiple objects into one, similar to Object.assign but with additional features.

const { assign } = require('@fluentui/utilities');

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = assign({}, obj1, obj2);
console.log(mergedObj); // Outputs: { a: 1, b: 3, c: 4 }

DOM Utilities

The getDocument function provides a safe way to access the document object, which is useful for server-side rendering scenarios.

const { getDocument } = require('@fluentui/utilities');

const doc = getDocument();
console.log(doc); // Outputs: [object Document]